<style include="diagnostics-shared">
  .error {
    background-color: var(--google-red-50);
    color: var(--google-red-600);
    margin-right: 14px;
  }

  .queued {
    background-color: var(--google-grey-200);
    color: var(--google-grey-700);
    margin-right: 7px;
  }

  .running {
    background-color: var(--google-blue-50);
    color: var(--google-blue-600);
  }

  .stopped {
    background-color: var(--google-grey-200);
    color: var(--google-grey-700);
  }

  .success {
    background-color: var(--google-green-50);
    color: var(--google-green-600);
  }

  #textBadge {
    @apply --diagnostics-text-badge-font;
    border-radius: 4px;
    height: 20px;
    padding: 2px 6px;
    text-transform: uppercase;
  }
</style>

<span id="textBadge" class$="[[badgeType]]" hidden$="[[hidden]]">[[value]]</span>